<!DOCTYPE html> 
<html lang='en'> 
 
<head> 
    <meta charset='utf-8' /> 
    <title>VisualPHPUnit</title> 
    <link rel="stylesheet" href="ui/css/index.css" media="screen" /> 
    <link rel="stylesheet" href="ui/css/jqueryFileTree.css" media="screen" /> 
    <link rel='stylesheet' href='ui/css/jquery-ui-1.8.11.custom.css' /> 
</head> 

<body> 
    <div id='container'>
        <div id='browser'>
            <h1>VisualPHPUnit</h1>

            <fieldset> 
                <legend id='legend_tests'>Tests</legend> 
                <ul> 
                    <li> 
                        <div id='file_tree'></div>
                        <span id='file_help'>
                            Tips: You can select multiple files by single-clicking them.  You can also use shift+click to select a range of files, or ctrl+click to select an entire directory.
                        </span>
                        <input type='hidden' name='test_files' id='test_files' />
                    </li> 
                </ul> 
            </fieldset> 

            <fieldset> 
                <legend id='legend_options'>Options</legend> 
                <ul> 
                    <li> 
                    <label for='store_statistics'>Store Statistics:</label> 
                    <select name='store_statistics' id='store_statistics'>
                        <option value='0' <?php if ( !STORE_STATISTICS ) echo 'selected';?>>No</option>
                        <option value='1' <?php if ( STORE_STATISTICS ) echo 'selected';?>>Yes</option>
                    </select>
                    </li> 

                    <li> 
                        <label for='create_snapshots'>Create Snapshots:</label> 
                        <select name='create_snapshots' id='create_snapshots'>
                            <option value='0' <?php if ( !CREATE_SNAPSHOTS ) echo 'selected';?>>No</option>
                            <option value='1' <?php if ( CREATE_SNAPSHOTS ) echo 'selected';?>>Yes</option>
                        </select>
                    </li> 

                    <li> 
                        <label for='snapshot_directory'>Snapshot Directory:</label> 
                        <input type='text' name='snapshot_directory' id='snapshot_directory' value='<?php echo SNAPSHOT_DIRECTORY;?>' />
                    </li> 

                    <li> 
                        <label for='sandbox_errors'>Sandbox Errors:</label> 
                        <select name='sandbox_errors' id='sandbox_errors'>
                            <option value='0' <?php if ( !SANDBOX_ERRORS ) echo 'selected';?>>No</option>
                            <option value='1' <?php if ( SANDBOX_ERRORS ) echo 'selected';?>>Yes</option>
                        </select>
                    </li> 
                
                    <li class='sandbox'> 
                        <label for='sandbox_filename'>Sandbox Filename:</label> 
                        <input type='text' name='sandbox_filename' id='sandbox_filename' value='<?php echo SANDBOX_FILENAME;?>' />
                    </li> 

                    <li class='sandbox'> 
                        <label>Sandbox Ignore:</label> 
                        <div id='sandbox_inputs'>
                            <input type='checkbox' name='sandbox_ignore[]' id='e_notice' value='E_NOTICE' />
                            <label for='e_notice'>E_NOTICE</label>
                            <input type='checkbox' name='sandbox_ignore[]' id='e_warning' value='E_WARNING' />
                            <label for='e_warning'>E_WARNING</label>
                            <input type='checkbox' name='sandbox_ignore[]' id='e_error' value='E_ERROR' />
                            <label for='e_error'>E_ERROR</label>
                            <input type='checkbox' name='sandbox_ignore[]' id='e_parse' value='E_PARSE' />
                            <label for='e_parse'>E_PARSE</label>
                            <input type='checkbox' name='sandbox_ignore[]' id='e_strict' value='E_STRICT' />
                            <label for='e_strict'>E_STRICT</label>
                        </div>
                    </li> 

                    <li>
                        <input type='submit' id='run_tests' value='Run Tests' />
                    </li>
                </ul> 
            </fieldset>

            <fieldset> 
                <legend id='legend_archives'>Archives</legend> 
                <ul> 
                    <li> 
                        <label for='select_snapshot'>Select Snapshot:</label> 
                        <select name='select_snapshot' id='select_snapshot'>
                            <?php foreach ( $results as $file ) { ?>
                                <option value='<?php echo $file;?>'><?php echo $file;?></option>
                            <?php } ?>
                        </select>
                        <input type='hidden' id='view_snapshot' name='view_snapshot' value='0' />
                    </li> 

                    <li>
                        <input type='submit' id='view_archive' value='View' />
                    </li>
                </ul> 
            </fieldset> 

            <fieldset> 
                <legend id='legend_graphs'>Graphs</legend> 
                <ul> 
                    <li> 
                        <label for='graph_type'>Type:</label> 
                        <select id='graph_type'>
                            <option value='Suite'>Suites</option>
                            <option value='Test'>Tests</option>
                        </select>
                    </li> 

                    <li> 
                        <label for='time_frame'>Time Frame:</label> 
                        <select id='time_frame'>
                            <option value='Daily'>Daily</option>
                            <option value='Weekly'>Weekly</option>
                            <option value='Monthly'>Monthly</option>
                        </select>
                    </li> 

                    <li> 
                        <label for='start_date'>Start Date:</label> 
                        <input type='text' id='start_date' />
                    </li> 
                
                    <li> 
                        <label for='end_date'>End Date:</label> 
                        <input type='text' id='end_date' />
                    </li> 

                    <li> 
                        <input type='submit' id='draw_graph' value='Draw Graph' disabled />
                    </li> 
                </ul> 
            </fieldset> 



        </div>

        <div id='output'>

        </div>
    </div>
</body> 

<script src="ui/js/jquery-1.5.1.min.js"></script> 
<script src="ui/js/jquery.sortElements.js"></script>
<script src="ui/js/jqueryFileTree/jqueryFileTree.js"></script> 
<script src='ui/js/jquery-ui-1.8.11.custom.min.js'></script>
<script src="ui/js/Highcharts-2.1.4/highcharts.js"></script>
<script src="ui/js/Highcharts-2.1.4/themes/gray.js"></script>
<script> 
    $(document).ready(function() {

        function updateTests() {
            var tests = '';
            $('.selected_file').each(function() {
               tests += $(this).children().attr('rel') + '|'; 
            });
            return tests;
        }

        $('#file_tree').fileTree({ 
            /* fix for Windoze filepaths */
            root: '<?php echo str_replace('\\', '/', realpath(TEST_DIRECTORY));?>',
            script: 'ui/js/jqueryFileTree/connectors/jqueryFileTree.php' 
        }, function(file) {
            $('#test_files').val(updateTests());
        });

        function handleSubmit() {
            if ( !$('.error_message').length ) {
                $('#run_tests').removeAttr('disabled');
            } else {
                $('#run_tests').attr('disabled', 'disabled');
            }
        }

        function getError(selector, ajaxType) {
            $.get('index.php', { dir: selector.val(), type: ajaxType }, function(data) {
                selector.siblings('.error_message').remove();
                if ( data != 'OK' ) {
                    selector.after("<span class='error_message'>" + data + "</span>");
                }
                handleSubmit();
            });
        }

        function updateBrowser() {
            setTimeout(function() {
                $('#container').css('height', $(document).height());
            }, 100)
        }

        $('#create_snapshots').change(function() {
            if ( $(this).val() == 1 ) {
                $(this).parent().next().show();
                getError($('#snapshot_directory'), 'dir');
            } else {
                $(this).parent().next().hide().children('.error_message').remove();
                handleSubmit();
            }
            updateBrowser();
        });

        $('#sandbox_errors').change(function() {
            if ( $(this).val() == 1 ) {
                $(this).parent().nextAll('.sandbox').show();
                getError($('#sandbox_filename'), 'file');
            } else {
                $(this).parent().nextAll('.sandbox').hide().children('.error_message').remove();
                handleSubmit();
            }
            updateBrowser();
        });

        $('#snapshot_directory').blur(function() {
            getError($(this), 'dir');
        });

        $('#sandbox_filename').blur(function() {
            getError($(this), 'file');
        });

        function updateIgnore(ignoreErrors) {
            var ignore = ignoreErrors.split('|');
            for ( var i = 0; i < ignore.length; i++ ) {
                $('#' + ignore[i].toLowerCase()).attr('checked', 'checked');
            }
        }

        $('#legend_tests, #legend_options').click(function() {
            $('#legend_tests, #legend_options').next().slideToggle();
            $('#view_snapshot').val(0);
            $('#legend_archives, #legend_graphs').next().slideUp(300, function() {
                updateBrowser();
            });
        });

        $('#legend_archives').click(function() {
            $(this).next().slideToggle();
            $('#view_snapshot').val(1);
            $('#legend_tests, #legend_options, #legend_graphs').next().slideUp(300, function() {
                updateBrowser();
            });
        });

        $('#legend_graphs').click(function() {
            $(this).next().slideToggle();
            $('#legend_tests, #legend_options, #legend_archives').next().slideUp(300, function() {
                updateBrowser();
            });
        });

        function updateOutput() {
            $('#sort_type').unbind();
            $('#sort_type').bind('change', function() {
                var type = $(this).val();
                switch ( type ) {
                    case 'Results (asc)':
                        $('.box.rounded:not(.error)').sortElements(function(a, b) {
                            return $(a).attr('data-suite-status') > $(b).attr('data-suite-status');
                        });
                        break;
                    case 'Results (desc)':
                        $('.box.rounded:not(.error)').sortElements(function(a, b) {
                            return $(a).attr('data-suite-status') < $(b).attr('data-suite-status');
                        });
                        break;
                    case 'Time (asc)':
                        $('.box.rounded:not(.error)').sortElements(function(a, b) {
                            return $(a).attr('data-suite-time') > $(b).attr('data-suite-time');
                        });
                        break;
                    case 'Time (desc)':
                        $('.box.rounded:not(.error)').sortElements(function(a, b) {
                            return $(a).attr('data-suite-time') < $(b).attr('data-suite-time');
                        });
                        break;
                }
            });

            $('#sort_type').trigger('change');

            $('.display').unbind();
            $('.display').bind('click', function() {
                var checkbox = $(this);
                var suites = $('.suite_' + checkbox.attr('target'));
                if ( checkbox.is(':checked') ) {
                    suites.fadeIn();
                } else  {
                    suites.fadeOut();
                }
            });

            $('.expand.button').each(function(index) {
                $(this).click(function(e) {
                    if ( $(this).text() == '-' ) {
                        if ( $(this).parent().hasClass('test') ) {
                            $(this).next('.more').slideUp();
                        } else {
                            $(this).parent().next('.more').slideUp();
                        }
                        $(this).text('+');
                    } else {
                        if ( $(this).parent().hasClass('test') ) {
                            $(this).next('.more').slideDown();
                        } else {
                            $(this).parent().next('.more').slideDown();
                        }
                        $(this).text('-');
                    }
                });
            });

            $('ul li div span').each(function() {
                var width = $(this).attr('data-percent');
                $(this).css({ 'width': width + '%' });
            });
        }

        $('#draw_graph').click(function(event) {
            event.preventDefault();
            $('#output').html("<div class='loader'><img src='ui/images/loading.gif' /></div>");

            $.post('index.php', {
                'graph_type' : $('#graph_type').val(),
                'time_frame' : $('#time_frame').val(),
                'start_date' : $('#start_date').val(),
                'end_date'   : $('#end_date').val()
            }, function(data) {
                var chart = $.parseJSON(data);
                $('#output').fadeOut(300, function() {
                    $(this).html("<div id='graph_container' class='highcharts-container'></div>");
                    new Highcharts.Chart(chart);
                    $(this).fadeIn(300, function() {
                        updateBrowser();
                    });
                });
            }); 
        });

        $('#view_archive').click(function(event) {
            event.preventDefault();
            $('#output').html("<div class='loader'><img src='ui/images/loading.gif' /></div>");

            $.post('index.php', {
                'select_snapshot' : $('#select_snapshot').val(),
                'view_snapshot'   : $('#view_snapshot').val()
            }, function(data) {
                $('#output').fadeOut(300, function() {
                    $(this).html(data).fadeIn(300, function() {
                        updateBrowser();
                        updateOutput();
                    });
                });
            }); 
        });

        $('#run_tests').click(function(event) {
            event.preventDefault();
            $('#output').html("<div class='loader'><img src='ui/images/loading.gif' /></div>");

            var sandboxIgnore = { 'types[]' : []};
            $(":checked").each(function() {
                sandboxIgnore['types[]'].push($(this).val());
            });

            $.post('index.php', {
                'store_statistics'   : $('#store_statistics').val(),
                'create_snapshots'   : $('#create_snapshots').val(),
                'snapshot_directory' : $('#snapshot_directory').val(),
                'sandbox_errors'     : $('#sandbox_errors').val(),
                'sandbox_filename'   : $('#sandbox_filename').val(),
                'sandbox_ignore'     : sandboxIgnore,
                'test_files'         : $('#test_files').val(),
            }, function(data) {
                $('#output').fadeOut(300, function() {
                    $(this).html(data).fadeIn(300, function() {
                        updateBrowser();
                        updateOutput();
                    });
                });

                // Update the snapshot list
                $.get('index.php', {
                    'snapshots' : '1'
                }, function(data) {
                    var snapshots = $.parseJSON(data);
                    $('#select_snapshot').html('');
                    $.each(snapshots, function(key, snapshot) {
                        $('#select_snapshot').append($('<option></option>').attr('value', snapshot).text(snapshot)); 
                    });
                });
            }); 
        });

        function constrainDates() {
            var startDate = $('#start_date').datepicker('getDate');
            var endDate = $('#end_date').datepicker('getDate'); 
            if ( endDate < startDate ) {
                $('#end_date').datepicker('setDate', startDate);
            }
            if (startDate != null) {
                var timeFrame = $('#time_frame').val();
                switch ( timeFrame ) {
                    case 'Daily': 
                        var endDateMax = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 12);
                        break;
                    case 'Weekly':
                        var endDateMax = new Date(startDate.getFullYear(), startDate.getMonth(), startDate.getDate() + 84);
                        break;
                    case 'Monthly':
                        var endDateMax = new Date(startDate.getFullYear(), startDate.getMonth() + 12, startDate.getDate());
                        break;
                }
                $('#end_date').datepicker('option', {
                    'maxDate': endDateMax,
                    'minDate': startDate
                });
                $('#end_date').trigger('change');
            }
        }

        $('#start_date').datepicker({ 
            onSelect: function(dateText, inst) {
                constrainDates();
            }
        });

        $('#end_date').datepicker();

        $('#time_frame').change(function() {
            constrainDates();
        });

        $('#start_date, #end_date').change(function() {
            if ( $('#start_date').val().length && $('#end_date').val().length ) {
                $('#draw_graph').removeAttr('disabled');
            } else {
                $('#draw_graph').attr('disabled', 'disabled');
            }
        });

        $('#create_snapshots').trigger('change');
        $('#sandbox_errors').trigger('change');
        updateIgnore('<?php echo SANDBOX_IGNORE; ?>');
        $('#legend_tests, #legend_options, #legend_archives, #legend_graphs').next().css('display', 'none');
        
    });
</script> 
</html> 
